<template>
  <el-tabs value="first1" type="card">
    <el-tab-pane label="工单信息" name="first1">
      <el-form :model="value" :inline="true" size="small" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="服务等级">
              <el-select v-model="value.orderParam.serviceLevel" class="filter-item input_text">
                <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="故障类型">
              <el-select v-model.lazy="value.orderParam.faultType" class="filter-item input_text">
                <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="服务商">
              <el-select v-model="value.orderParam.supplier" class="filter-item input_text">
                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定合同">
              <el-input class="input_text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="预约上门时间">
              <el-date-picker
                v-model="value.orderParam.addriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 300px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估服务时长">
              <el-input-number v-model.number="value.orderParam.serviceTime" :min="0" :max="999" controls-position="right" style="width: 170px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所需工具">
          <el-input v-model="value.orderParam.requireTool" class="row_length" :rows="4" type="textarea" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="value.orderParam.notes" class="row_length" :rows="4" type="textarea" />
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="巡检单信息" name="second1">
      <el-form :inline="true" :model="value" size="small">
        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="value.inspection.customerName" class="row_length" />
        </el-form-item>
        <el-form-item label="报修设备">
          <el-input v-model="value.inspection.faultDeviceNames" class="row_length" />
        </el-form-item>
        <el-form-item label="报修地址">
          <el-input v-model="value.inspection.address" class="row_length" />
        </el-form-item>
        <el-form-item label="故障描述" prop="faultDesc">
          <el-input v-model="value.inspection.faultDesc" class="row_length" :rows="4" type="textarea" />
        </el-form-item>
        <el-form-item label="故障图片">
          <div style="display: inline-block;margin: 0px 2px;width: 450px;">
            <el-upload
              :on-preview="handlePictureCardPreview"
              :on-error="handleError"
              :file-list="value.inspection.fileList"
              :action="imagesUploadApi"
              :disabled="true"
              list-type="picture-card"
            />
            <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
              <img :src="dialogImageUrl" width="100%" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="报修时间" prop="reportTime">
              <el-date-picker
                v-model="value.inspection.reportTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择报修时间"
                class="input_text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求到场时间" label-width="100px">
              <el-date-picker
                v-model="value.inspection.reqiureTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择到场时间"
                style="width:300px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="联系人" prop="linker">
              <el-input v-model="value.inspection.linker" class="input_text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="cellphone">
              <el-input v-model="value.inspection.cellphone" class="input_text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="value.inspection.notes" class="row_length" :rows="4" type="textarea" />
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'PlanOrder',
  props: {
    value: {
      type: Object,
      required: true
    },
    serviceLevelOptions: {
      type: Array,
      required: true
    },
    faultTypeOptions: {
      type: Array,
      required: true
    },
    supplierOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeName: 'first1',
      dialogImageUrl: '',
      dialogVisible: false,
      // serviceLevelOptions: [],
      // faultTypeOptions: [],
      // supplierOptions: [],
      form: {
        customerName: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi'
    ])
  },
  methods: {
    handlePictureCardPreview() {
      this.$emit('handlePictureCardPreview')
    },
    handleError() {
      this.$emit('handleError')
    }
  }
}
</script>

<style scoped>
.row_length {
    width: 760px
}
.input_text {
    width: 300px
}
</style>

